<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 数据展示</title>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <h1>客户总金额统计</h1>
    <div id="total_by_customer" style="width: 600px; height: 400px;"></div>

    <h1>省份订单数量统计</h1>
    <div id="orders_by_province" style="width: 600px; height: 400px;"></div>

    <h1>平均送货延迟时间</h1>
    <div id="average_delay" style="width: 600px; height: 400px;"></div>

    <script>
        // 客户总金额统计
        fetch('http://127.0.0.1:8000/total_by_customer/')
            .then(response => response.json())
            .then(data => {
                var categories = data.map(item => item['客户名称']);
                var values = data.map(item => item['金额']);

                var myChart = echarts.init(document.getElementById('total_by_customer'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: categories
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: values,
                        type: 'bar'
                    }]
                };
                myChart.setOption(option);
            });

        // 省份订单数量统计
        fetch('http://127.0.0.1:8000/orders_by_province/')
            .then(response => 
                response.json())
            .then(data => {

                var categories = data.map(item => item['客户省份']);
                var values = data.map(item => item['订单编号']);

                var myChart = echarts.init(document.getElementById('orders_by_province'));
                var option = {
                    xAxis: {
                        type: 'category',
                        data: categories
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: values,
                        type: 'bar'
                    }]
                };
                myChart.setOption(option);
            });

        // 平均送货延迟时间
        fetch('/average_delay/')
            .then(response => response.json())
            .then(data => {
                var delay = data.average_delay;

                var myChart = echarts.init(document.getElementById('average_delay'));
                var option = {
                    title: {
                        text: '平均送货延迟时间 (天)'
                    },
                    series: [{
                        data: [delay],
                        type: 'bar'
                    }]
                };
                myChart.setOption(option);
            });
    </script>
</body>
</html>
